<template>
  <div class="buyCard acenter">
    <div class="leftPath ccenter">
      <nut-image
        :src="commonStore.img_domain + options.image_list[0]"
        v-if="options.image_list?.length"
      >
        <template #error>
          <nut-image
            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
            fit="contain"
          /> </template
      ></nut-image>
      <nut-image
        :src="getAssetsFile('home/groupLink/defaultProduct.png')"
        v-else
      />
      <div class="sellout ccenter" v-if="status == 0">
        <p>已下架</p>
      </div>
    </div>
    <div class="rightPath">
      <div class="title texthiden">{{ options.goods_name }}</div>
      <div class="info texthiden">{{ options.description }}</div>
      <div class="count">已团购{{ options.buy_count }}件</div>
      <div class="prices">
        <div class="newPrice"><span>￥</span>{{ options.format_price }}</div>
        <div class="oldPrice" v-if="options.line_price">
          <span>￥</span>{{ options.line_price }}
          <p class="line"></p>
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/pub-use";
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();
const props = defineProps<{ options: any; status?: any }>();
</script>

<style lang="scss" scoped>
.buyCard {
  position: relative;
  .leftPath {
    position: relative;
    .nut-image {
      :deep(img) {
        width: 210px;
        height: 210px;
        border-radius: 20px;
      }
    }
    .sellout {
      position: absolute;
      width: 120px;
      height: 120px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      p {
        color: #ffffff;
        font-size: 26px;
      }
    }
  }

  .rightPath {
    margin-left: 18px;
    .title {
      font-weight: 500;
      font-size: 28px;
      font-weight: 500;
      color: #333333;
      width: 422px;
    }
    .info {
      font-weight: 400;
      color: #999999;
      font-size: 24px;
      margin-top: 8px;
      width: 400px;
    }
    .count {
      color: #f55726;
      font-size: 24px;
      margin-top: 25px;
    }
    .prices {
      margin-top: 24px;
      display: flex;
      .newPrice {
        color: #f55726;
        font-weight: 500;
        font-size: 24px;
        span {
          font-size: 18px;
        }
      }
      .oldPrice {
        height: 30px;
        font-size: 20px;
        font-weight: 400;
        color: #999999;
        margin-left: 15px;
        position: relative;
        span {
          font-size: 18px;
        }
        .line {
          width: 100%;
          height: 2px;
          background-color: #999999;
          position: absolute;
          top: 13px;
          left: 2px;
        }
      }
    }
  }
}
</style>
